<template>
  <span>
    <span v-if="to" :class="classes">
      <a
        :href="linkUrl"
        :target="target"
        :class="linkClasses"
        @click.exact="handleCheckClick($event, false)"
        @click.ctrl="handleCheckClick($event, true)"
        @click.meta="handleCheckClick($event, true)"
      >
        <slot></slot>
      </a>
    </span>
    <span v-else :class="linkClasses">
      <slot></slot>
    </span>
    <span :class="separatorClasses" v-html="separator" v-if="!showSeparator"></span>
    <span :class="separatorClasses" v-else>
      <slot name="separator"></slot>
    </span>
  </span>
</template>
<script>
import mixinsLink from '../../mixins/link';
const prefixCls = 'haloe-breadcrumb-item';

export default {
  name: 'BreadcrumbItem',
  mixins: [ mixinsLink ],
  inject: ['BreadcrumbInstance'],

  props: {
    disabled: {
      type: Boolean,
      default: false
    },
  },

  data () {
    return {
      showSeparator: false
    };
  },

  computed: {
    classes() {
      return [
        {
          [`${prefixCls}-disabled`]: this.disabled
        },
      ]
    },

    linkClasses () {
      return `${prefixCls}-link`;
    },
    separatorClasses () {
      return `${prefixCls}-separator`;
    },
    separator () {
      return this.BreadcrumbInstance.separator;
    }
  },
  mounted () {
    this.showSeparator = this.$slots.separator !== undefined;
    window.console.log(this.$slots.separator)
  }
};
</script>
